import 'package:flutter/material.dart';
import 'package:happy_elf_app/store/home.dart';
import 'package:provider/provider.dart';
import 'package:happy_elf_app/utils/adaption.dart';
import 'package:happy_elf_app/utils/globalKey.dart';

class HomeBar extends StatefulWidget {
  const HomeBar({super.key});

  @override
  State<HomeBar> createState() => _HomeBarState();
}

final HomeDataProvider = Provider.of<HomeData>(
  Global.navigatorKey.currentContext!,
  listen: false,
);

class _HomeBarState extends State<HomeBar> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  static const double _barWidth = 343;
  static const double _barHeight = 40;
  static const double _borderRadius = 8.80;
  static const EdgeInsets _barPadding = EdgeInsets.all(1.47);
  static const EdgeInsets _barMargin = EdgeInsets.symmetric(horizontal: 24);

  final List<Map<String, dynamic>> _tabList = [
    {'title': '目标设定', 'value': 1},
    {'title': '任务拆分', 'value': 2},
    {'title': '任务追踪', 'value': 3},
  ];

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  Widget _buildTabItem(Map<String, dynamic> tab) {
    final bool isSelected = tab['value'] == HomeDataProvider.activeTab['value'];
    return Expanded(
      child: GestureDetector(
        child: Container(
          height: 36.45,
          padding: const EdgeInsets.symmetric(horizontal: 8.80, vertical: 5.87),
          decoration: ShapeDecoration(
            color: isSelected ? Colors.white : const Color(0xFFF5F5F5),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(_borderRadius),
            ),
            // 只有选中项显示阴影
            shadows: isSelected
                ? [
                    const BoxShadow(
                      color: Color(0x0C000000),
                      blurRadius: 2.93,
                      offset: Offset(0, 2.93),
                      spreadRadius: 0,
                    )
                  ]
                : null,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                tab['title'],
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: isSelected
                      ? const Color(0xFF3C3C3C)
                      : const Color(0xFF999999),
                  fontSize: 15,
                  fontFamily: 'Inter',
                  fontWeight: isSelected ? FontWeight.w700 : FontWeight.w500,
                  height: 0.98,
                ),
              ),
            ],
          ),
        ),
        onTap: () {
          HomeDataProvider.setTab(tab);
          setState(() {});
        },
      ),
    );
  }

  // 6. 封装分割线组件（复用）
  Widget _buildDivider() {
    return Container(
      color: Colors.grey,
      width: 1.px,
      height: 18.px,
      margin: EdgeInsets.symmetric(horizontal: 10.px),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: _barWidth,
      height: _barHeight,
      padding: _barPadding,
      margin: _barMargin,
      decoration: ShapeDecoration(
        color: const Color(0x99EEEEEE),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(_borderRadius),
        ),
      ),
      child: Row(
        children: [
          // 7. 循环生成Tab（替代重复的Expanded+Container，精简代码）
          _buildTabItem(_tabList[0]),
          _buildDivider(),
          _buildTabItem(_tabList[1]),
          _buildDivider(),
          _buildTabItem(_tabList[2]),
        ],
      ),
    );
  }
}
